<template>
	<view class="partner-steps e-flex">
		<!-- <view class="partner-steps--active e-rela">
			<view class="e-flex-xy-center">
				<text class="store-join-iconfont icongou e-font-32"></text>
			</view>
			<view class="text-center e-m-t-14">
				{{ $t('store.szzh') }}
			</view>
		</view> -->
		<view class="e-rela partner-steps--active" >
			<view class="e-flex-xy-center">
				<text class="store-join-iconfont icongou e-font-32" v-show="value > 1"></text>
				<image src="../../static/steps_icon.png" class="img-32" v-show="value <= 1"></image>
			</view>
			<view class="text-center e-m-t-14">
				{{ $t('store.jyxx') }}
			</view>
		</view>
		<view class="e-rela" :class="{ 'partner-steps--active': value > 2 }">
			<view class="e-flex-xy-center">
				<text class="store-join-iconfont icongou e-font-32" v-show="value > 2"></text>
				<image src="../../static/steps_icon.png" class="img-32" v-show="value <= 2"></image>
			</view>
			<view class="text-center e-m-t-14">
				{{ $t('store.dpxx') }}
			</view>
		</view>
		<view class="e-rela" :class="{ 'partner-steps--active': value > 3 }">
			<view class="e-flex-xy-center">
				<text class="store-join-iconfont icongou e-font-32" v-show="value > 3"></text>
				<image src="../../static/steps_icon.png" class="img-32" v-show="value <= 3"></image>
			</view>
			<view class="text-center e-m-t-14">
				{{ $t('store.tjsh') }}
			</view>
		</view>
	</view>
</template>

<script>
export default {
	props: {
		value: Number
	}
}
</script>

<style lang="scss" scoped>
@import url('../../static/font/iconfont.css');
.partner-steps {
	> view {
		flex: 0 0 33.33%;
		color: #9a9a9a;
		&::after {
			content: '';
			position: absolute;
			width: calc(100% - 32rpx);
			left: calc(50% + 16rpx);
			top: 14rpx;
			height: 4rpx;
			background-color: #e9e7e9;
		}
		&:last-child{
			&::after{
				left: calc(0px - 50% + 16rpx);
			}
		}
	}
	&--active {
		color: var(--color-primary) !important;
		&::after {
			background-color: var(--color-primary)  !important;
		}
	}
}
</style>
